<template>
  <view class="container">
    <view class="intro" style="background-color: #fffbe6; height:100px ;margin: 10px;padding:10px;">
      <view style="font-weight: 500;color:#5a5956;">导语</view>
      <view style="margin-top:10px;">对招宣知识的掌握程度以及理解分析信息和解决问题的能力，可以更好地武
	  装头脑，指导实践推动工作。</view>
    </view>
    <view class="question-section">
      <view class="single-choice">
        <view style="color: blue;">1、单选题</view>
        <view>标题标题标题标题标题标题</view>
        <!-- 选项列表 -->
        <view class="options">
			<input type="text" placeholder="请选择答案" style="background-color: #fff;border: 1px solid #ccc;height:30px;padding:5px;border-radius: 3px;">
        </view>
      </view>
      <view class="multiple-choice">
        <view style="color: blue;">2、多选题</view>
        <text>标题标题标题标题标题标题</text>
        <!-- 选项列表 -->
        <view class="options">
          <checkbox-group style="display: flex;flex-direction: column; ">
            <label>
              <checkbox value="A" />答案1
            </label>
            <label>
              <checkbox value="B" />答案2
            </label>
            <label>
              <checkbox value="C" />答案3
            </label>
            <label>
              <checkbox value="D" />答案4
            </label>
          </checkbox-group>
        </view>
      </view>
	  </view>
    <view class="question-section">
      <view class="single-choice">
        <view style="color: blue;">3. 填空题</view>
        <view>标题标题标题标题标题标题<view>
        <!-- 选项列表 -->
        <view class="options">
			<input type="text" placeholder="请选择答案" style="background-color: #fff;border: 1px solid #ccc;height:30px;padding:5px;border-radius: 3px;">
        </view>
      </view>
	  </view>
    </view>
  </view>
  </view>
  <button type="primary" @click="clicka">立即提交</button>
  <button>保存记录</button>
</template>
<script>
export default {
	data() {
		return {}
	},
	methods:{
		clicka() {
			uni.navigateTo({
				url: "/pages/video/test/over"
			})
		}
	},
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.intro {
  margin-bottom: 40rpx;
}
.question-section {
  width: 100%;
}
.single-choice,
.multiple-choice,
.fill-in-the-blank {
  margin-bottom: 40rpx;
}
.options {
  display: flex;
  flex-direction: column;
}
view {
	margin-top: 5px;
}
button {
 margin: 10px
}
</style>
